<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<pre>
			keep-alive标签包裹router-view用于缓存组件，生命周期钩子只走一次，否则每次切换组件都会销毁组件重新渲染
		</pre>
		<div id="app">
			<App />
		</div>
		<script src="../node_modules/vue/dist/vue.js"></script>
		<script src="../node_modules/vue-router/dist/vue-router.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var Menu = {
				template: `<p>menu组件<br /></p>`,
				created(){
					console.log('menu组件被创建')
				},
				mounted(){
					console.log('menu组件被挂载')
				},
				destoryed(){
					console.log('menu组件被销毁')
				},
				
			}
			var Content = {
				template: '<p>content组件</p>',
				created(){
					console.log('content组件被创建')
				},
				mounted(){
					console.log('content组件被挂载')
				},
				destoryed(){
					console.log('content组件被销毁')
				},
			}
			let router = new VueRouter({
				routes: [{
					path: '/menu',
					name: 'menu',
					component: Menu,
				},{
					path: '/content',
					name: 'content',
					component: Content
				}]
			})
			
			let App = {
				template:`
				<div>
					<router-link to="/menu">菜单</router-link>
					<router-link to="/content">内容</router-link>
					<button @click="test">点击跳转</button>
					<keep-alive>
						<router-view></router-view>
					</keep-alive>
				</div>
				`,
				methods: {
					test(){
						this.$router.push('/content')
					}
				}
			}
			let vm = new Vue({
				el: '#app',
				components: {App},
				router,
				data(){
					return {
						name: 'zqf'
					}
				},
			})
		</script>
	</body>
</html>
